<template>
  <div>
    <Title title="核酸列表"> </Title>

    <el-row>
      <el-col :span="22" :offset="1">
        <el-table :data="nucList" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column prop="title" label="核酸结果" align="center">
            <template #default="scope">
              <!-- scope.$index：当前数据在所有数据中的索引下标 -->
              <!-- scope.row：当前这一条数据。包含了时间戳，包含了用户信息 -->
              <span> {{ scope.row.res }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="核酸时间" align="center">
            <template #default="scope">
              <!-- <span> {{ scope.row.date}}</span> -->
              <span> {{ $filters.dateFormat(scope.row.date) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <!-- 当登录的是本人才能修改组件的数据 -->
                <el-popconfirm
                  confirm-button-text="删除"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#626AEF"
                  @confirm="confirmDelOne(scope.row, scope.$index)"
                  title="你确定要删除吗?"
                >
                  <template #reference>
                    <el-button type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { InfoFilled } from "@element-plus/icons-vue";
import { onMounted, ref, reactive } from "vue";
import { Ajax } from "@/api";
// import { ElButton, ElDialog } from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { ShowErrorMsg } from "@/utils";
const nucList = ref([]);
const model = ref({}); //单个条数据
const formRef = ref<any>();

  const getNucList = async (payload?: any) => {//获取数据
  let res: any = await Ajax.nuclist(payload);
  nucList.value = res.result;
};
const confirmDelOne = async (data: any, index: any) => {//删除数据
  console.log(data, index);
  let res: any = await Ajax.nucdelete({ _id: data._id }); //后端删除
  getNucList(); //重新获取数据，刷新页面
};

const resetForm = () => {
  model.value = {};
  formRef.value.resetFields;
};

onMounted(() => {
  getNucList();
});
</script>

<style scoped lang="scss">
.btnBox {
  margin-right: 10px;
}
.my-header {
  text-align: center;
  // display: flex;
  // flex-direction: row;
  // justify-content: center;
  h4 {
    display: inline-block;
    span {
      margin-right: 30px;
    }
  }

  .el-button {
    float: right;
  }
}
.el-row {
  margin-bottom: 30px;
}
</style>
